<template>
    <div class="comments">
        <Comment :comment="comments"></Comment>
        <div class="replies">
            <div class="com">
                <!-- 二级评论 -->
                <CommentTwo v-for="item in comments.commentRespList" :key="item.id" :comment="item"></CommentTwo>
            </div>
            <div class="reply">
                <el-input placeholder="回复：" v-model="replyComment"></el-input>
                <el-button type="primary" @click="reply">回复</el-button>
            </div>
        </div>
    </div>
</template>
<script>
import { mapState } from 'vuex'
import Comment from './comment/index.vue'
import CommentTwo from './comment_two/index'
export default {
    name: 'Comments',
    components: {
        Comment,
        CommentTwo
    },
    mixins: [],
    props: ['userInfo', 'comments'],
    data() {
        return {
            msg: '',
            replyComment: ''
        }
    },
    computed: {
        ...mapState('userStore', ['token'])
    },
    watch: {

    },
    mounted() {

    },
    methods: {
        reply() {
            if (!this.token) {
                this.$confirm('请先登录！', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$bus.$emit('show', true)
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    });
                });
            } else {
                // 判断发表内容是否为空
                if (this.replyComment.trim() === '') {
                    this.$message({
                        type: 'error',
                        message: '发表内容不能为空！'
                    })
                } else {
                    // 发表评论
                    const obj = {
                        commentId: this.comments.id,
                        commentType: 0,
                        content: this.replyComment,
                        infoId: this.comments.infoId,
                        toUserId: this.comments.fromUserId
                    }
                    this.$emit('addComments', obj)
                    this.replyComment = ''
                    this.$message({
                        type: 'success',
                        message: '评论成功！'
                    })
                }
            }
        }
    }
};
</script>
<style lang='less' scoped>
.comments {
    margin: 50px 0;

    .replies {
        margin-top: 15px;
        padding-left: 50px;

        .reply {
            margin: 40px 0;
            display: flex;
            align-items: center;
            padding-right: 200px;
        }
    }
}
</style>